<template>
	<div id="mainportal" class="container" style="background-color: #fff;">

		<comhead title="商品详情" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>

		<!--
    	作者：yang
    	时间：2018-05-29
    	描述：车型信息
    -->

    	<div class="banner" v-if="kdFlag && classifyBanner">
    		<img :src="classifyBanner"/>
    	</div>
		<div class="car-box">
			<div class="car-box-icon">
				<img :src="moduleIcon" />
			</div>
			<div class="car-box-con">
				<span>{{brandName}} {{seriesName}}</span>
				<span style="margin-top: 10px;">{{moduleName}}</span>
			</div>
			<div v-bind:style="{ background: themeColors}" class="qieIocn" @click="existing">
				<span class="iconfont icon-qiehuan"></span> 切换
			</div>
		</div>

		<!--S端配置信息  -->
		<div v-for="item in info.propertyList" v-if="item.groupName !='基础属性' && item.groupName !='加注信息'">
			<div class='updateInfo1' v-bind:style="{ background: themeColors}">{{item.groupName}}</div>
			<div class='basisInfo' v-if="item.groupName !='基础属性' &&  item.groupName !='加注信息'">
				<div v-for="(main,index) in item.list" style="display:flex;font-size:14px; " :style=" index !=item.list.length-1 ?'border-bottom: solid 1px #e5e5e5':''">
					<div class='leftbox'>{{ main.keyName ?main.keyName :'-'}}</div>

					<div class='rightbox' style="display:flex;justify-content: space-between;align-items: center;" :style="main.propertyType==='IMAGE'?'text-decoration:underline;color: #1973bf;':''" @click="getImageDetail(main.url)">
						<div>{{ main.keyValue ?main.keyValue :'-'}} </div>
						<img src='../../image/back.png' v-if="main.propertyType==='IMAGE'" style='width:15px;height:15px;margin-right:10px;' />
					</div>
				</div>
			</div>
		</div>

		<!--B端添加的维护信息 -->

		<div v-for="item in info.maintainColumnList">
			<div class='updateInfo1' v-bind:style="{ background: themeColors}">{{item.columnName}}</div>
			<div class='basisInfo' style="margin: 20px 20px 0px 20px;">
				<div v-for="(main,index) in item.maintainList" style="display:flex;font-size:14px;border-bottom: solid 1px #e5e5e5 ">
					<div class='leftbox'>{{ main.infoName ?main.infoName :'-'}}</div>
					<div class='rightbox' style="display:flex;justify-content: space-between;align-items: center;" :style="main.contentType==='IMAGE'?'text-decoration:underline;color: #1973bf;':''" @click="getImageDetail(main.contentUrl)">
						<div>{{ main.content ?main.content :'-'}}</div>

						<img src='../../image/back.png' v-if="main.contentType==='IMAGE'" style='width:15px;height:15px;margin-right:10px;' />
					</div>
				</div>
				<template>
					<div v-for="element in info.propertyList">
						<div style="margin:0rpx 30rpx;border-top:none" v-if="element.groupName =='加注信息'">

							<div v-for="(child,indexs) in element.list" style="display: flex; " :style="indexs !=element.list.length-1 ?'border-bottom: solid 1px #e5e5e5':''">
								<div class='leftbox' style="font-size: 14px;">{{ child.keyName ?child.keyName :'-'}}</div>
								<div class='rightbox' style="display:flex;justify-content: space-between;align-items: center;" :style="child.contentType==='IMAGE'?'text-decoration:underline;color: #1973bf;':''" @click="getImageDetail(child.contentUrl)">
									<div>{{ child.keyValue ?child.keyValue :'-'}}</div>

									<img src='../../image/back.png' v-if="child.contentType==='IMAGE'" style='width:15px;height:15px;margin-right:10px;' />
								</div>
							</div>
						</div>
					</div>
				</template>
			</div>
			<div class='basisInfo' style='border-bottom: solid 1px #fff;margin:0 20px;border-top:none'>
				<div v-if="newBasisList" style="font-size:14px; border-bottom: solid 1px #e5e5e5;display:flex;">
					<div class='leftbox'>变速箱油</div>
					<div class='rightbox' bindtap='goPdbindCarList'>
						{{newBasisList.value}}
						<span v-if="imgUrls && imgUrls.length>0" catchtap='lookProductImage' style='color: #1973bf;margin-left:5px' @click="getDetail()">(查看全部)
		      </span>
					</div>
				</div>
			</div>

		</div>

		<!--基本信息  -->

		<div v-if="imageModel" style="height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #000;
    z-index: 2001;" @click="imageModel = false">
			<mt-swipe :auto="4000" style="width:100%;">
				<mt-swipe-item v-for="item in lookImageList">
					<div style="display: flex;
    align-items: center;height:100%;width:100%;">
						<img :src='item' style='width:100%;  ' />
					</div>
				</mt-swipe-item>
			</mt-swipe>
		</div>

		<div style='height: 50px;' v-if="$store.getters.getMerchant.basicMall"></div>
		<!--下单  -->
		<div class='btm_box' v-if="$store.getters.getMerchant.basicMall">
			<div style='width: 55%;display: flex;align-items: center;font-size:12px; border-top: solid 1px #e5e5e5;'>

				<span style='margin:5px 0 0 5px;'>合计：<span style='color:rgb(229, 28, 35)'>￥<span style='font-size:16px'>{{productTotle}}</span> <span style="color:#999">（共{{num}}件）</span></span>
				</span>

			</div>
			<div style='font-size:14px;background-color:rgb(246, 175, 42);  border-left: solid 1px #ddd;color:#fff;flex:1;display: flex;justify-content: center;align-items: center;' @click="changeModel('cart')">加入购物车</div>
			<div @click="changeModel('shop')" style='font-size:14px;background-color:rgb(229, 28, 35);color:#fff;flex:1;display: flex;justify-content: center;align-items: center;'>立即购买</div>
		</div>

		<div class="bg_shop1" v-if="datilModel" style=' display: flex;z-index: 999;background-color: rgba(0, 0, 0, 0.498039);height: 100vh;width: 100%;'>

			<div style=' width:100%; display: flex;justify-content: center;align-items: center;font-size:14px;'>
				<div style='margin:10px 20px;background-color:#fff;border-radius:5px;'>
					<div style='padding:10px;border-bottom:solid 1px #e5e5e5;'>
						<span style='font-size:18px;'> 详情</span>
						<span style='color:#999;float:right;padding: 0 10px' @click='changeDatilModel()'>x</span>
					</div>
					<div>
						<img :src='info.details' style="width: 100%;" />
					</div>
					<div style='padding:10px; display:flex;justify-content: flex-end;border-top:solid 1px #e5e5e5;'>
						<div style='border-radius: 5px;padding:5px 10px;ackground-color:#1973bf;background-color:#1973bf;color:#fff;' @click='changeDatilModel()'>
							关闭
						</div>

					</div>

				</div>
			</div>

		</div>

		<div :class="model ?'bg_shop1' :'bg_shop_none1'" style='z-index: 1;background-color: rgba(0, 0, 0, 0.498039);height: 100%;width: 100%;' @click='changeModel()'>

			<div style="position: relative;width:100%;height:100%;">

				<div style=' background-color:#fff;width:100%;' :class="model ?'modiaBoxUp2' :'modiaBoxDown2'" @click.stop='bindBody'>
					<div style='border-bottom:1px solid #e5e5e5;display:flex;margin-left:15px;justify-content: space-between'>
						<div style='padding:6px;margin-top:-35px;border-radius:5px;background-color:#fff;border:1px solid #e5e5e5;margin-bottom:20px;display:flex;'>
							<img :src='imgUrls[0]' style="width:80px;height:80px;" />
						</div>
						<div style='font-size:13px;flex:1;'>
							<div style='margin:10px  ;height:40px;overflow: hidden;font-size:14px;'>单价:
								<span style='font-size:18px;color:rgb(229, 28, 35)'>￥{{info.memberPrice}}</span>
							</div>

						</div>
						<div style='padding:10px;'>
							<img src='../../image/tl-3@2x.png' style='width:20px;height:20px' @click.stop='changeModel()' />
						</div>
					</div>

					<div class='num_box'>
						<div style='display:flex;align-items:center'>购买数量：
						</div>

						<div style='display:flex;'>
							<div class="num_small_box" :class="num === 1 ?'num_small_box_dis':''" @click.stop='addnum()'>-</div>
							<div class='num_box1'>{{num}}</div>
							<div class='num_small_box' @click.stop="addnum('add')">+</div>
						</div>
					</div>
					<div style='display:flex;align-items:center;font-size:14px; padding: 20px;'>
						<div>
							合计：
							<span style='font-size:18px;color:rgb(229, 28, 35)'>￥{{productTotle}}</span>
						</div>
					</div>
					<div style='display:flex;justify-content: center;align-items: center;width:100%;color:#fff;background-color:rgb(229, 28, 35);' @click='addCar'>
						<div style='margin:10px'>确定</div>
					</div>
				</div>

			</div>
		</div>

		<!-- 用组件浏览图片 -->

	</div>
</template>

<script>
	import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
	import { Indicator } from "mint-ui";
	import { Tabbar, TabItem } from "mint-ui";
	import { TabContainer, TabContainerItem } from "mint-ui";
	import comhead from "../../common/coffee/Comhead";

	export default {
		data() {
			return {
				datilModel: false,
				imageModel: false,
				productTotle: 0,
				basicMall: null,
				model: false,
				goodsId: "",
				info: [],
				num: 1,
				kdFlag: false,
				classifyBanner: this.$store.getters.getMerchant.classifyBanner ? this.$store.getters.getMerchant.classifyBanner : '',
				themeColors: '',
				brandName: '',
				seriesName: '',
				moduleName: '',
				moduleIcon: '',
				imgUrls: [],
				newBasisList: null,
				lookImageList: [],
				windowWidth: 375,
				shopModel: "",
				basisList: [{
						title: "商品名称",
						valueKey: "goodsName"
					},
					{
						title: "商品品牌",
						valueKey: "goodsBrand"
					},
					// {
					//   title: 'OEM号',
					//   valueKey: 'oemCode'
					// },
					{
						title: "商品编码",
						valueKey: "goodsModelNumber"
					},
					{
						title: "商品价格",
						valueKey: "memberPrice"
					}
				],
				contentUrl: []
			};
		},
		computed: {},

		methods: {
			existing() {
				this.$router.replace({
					name: "filtercar",
					query: {
						carId: this.carId
					}
				});
			},
			changeDatilModel() {
				console.log(111)
				this.datilModel = !this.datilModel;
			},
			handleColor(color) {
				switch(color) {
					case "白色":
						return "background-color:white;";
					case "黑色":
						return "background-color:black;";
					case "银色":
						return "background-color:#c0c0c0;";
					case "红色":
						return "background-color:red;";
					case "棕色":
						return "background-color:brown;";
					case "绿色":
						return "background-color:green;";
					case "蓝色":
						return "background-color:blue;";
					case "黄色":
						return "background-color:yellow;";
					case "紫色":
						return "background-color:purple;";
					default:
						return "background-color:white;";
				}
			},
			goPdbindCarList() {
				this.$router.push({
					name: "productcar",
					query: {
						goodsId: this.goodsId
					}
				});
			},
			getDetail() {
				if(!this.imgUrls) {
					return;
				}
				this.lookImageList = this.imgUrls
				this.imageModel = true;
			},
			getImageDetail(imageList) {

				if(!imageList) {
					return;
				}
				this.lookImageList = imageList.split(",");
				this.imageModel = true;
			},
			changeModel: function(e) {
				if(e) {
					this.shopModel = e;
				}
				this.model = !this.model;
			},
			bindBody() {
				return;
			},
			addnum: function(e) {
				if(e == "add") {
					this.num = this.num + 1;
				} else {
					if(this.num === 1) {
						return;
					}
					this.num = this.num - 1;
				}
				let pro = this.info.memberPrice * this.num;
				pro = pro.toFixed(2);
				this.productTotle = pro;
			},

			addCar: function(e) {
				if(!this.$store.getters.getLoginStatus.userId) {
					this.$router.push("/login");
					return;
				}

				let self = this;

				if(this.shopModel === "cart") {
					let url = this.$baseUrl.bizUrl + "/shopcart/add";
					let data = {
						token: this.$store.getters.getLoginStatus.token,
						userId: this.$store.getters.getLoginStatus.userId,
						goodsId: this.goodsId,
						skuId: this.info.sku[0].skuId,
						num: this.num
					};
					let callBack = res => {
						if(res == null) {
							console.log("网络请求错误！");
							return;
						}

						if(res.data.status != 200) {
							console.log("请求数据错误");
							return;
						}

						if(res.data.status == 200) {
							Toast({
								message: "成功"
							});

							(this.num = 1), (this.productTotle = this.info.memberPrice);
							self.changeModel(e);
						}
					};
					this.$reqFormPost(url, data, callBack);
				} else {
					console.log("购买，确定");
					self.changeModel(e);

					this.$router.push({
						name: "settle",
						query: {
							pagetype: "shop",
							goodsid: this.goodsId,
							num: this.num,
							skuid: this.info.sku[0].skuId,
							carid: this.carId
						}
					});
				}
			},
			getDatil() {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/goods/front/detail";
				let data = {};

				if(!this.$store.getters.getLoginStatus.userId) {
					data = {
						merchantId: this.$store.getters.getMerchant.merchantId,
						goodsId: this.goodsId, //商品id
						carId: this.carId
					};
				} else {
					data = {
						merchantId: this.$store.getters.getMerchant.merchantId,
						userId: this.$store.getters.getLoginStatus.userId,
						goodsId: this.goodsId, //商品id
						carId: this.carId
					};
				}

				//发起网络请求
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.status != 200) {
						console.log("请求数据错误");
						return;
					}
					if(res.status === 200) {
						console.log("商品详情", res.data.data);
						let obj = {
							'value': res.data.data.goodsModelNumber
						}
						let otherObj = null;
						this.num = 1;
						this.info = res.data.data;
						this.newBasisList = obj
						this.imgUrls = res.data.data.imageList.split(",");
						this.productTotle = res.data.data.memberPrice;
						this.brandName = res.data.data.propertyList[0].list[0].keyValue
						this.seriesName = res.data.data.propertyList[0].list[1].keyValue
						this.moduleName = res.data.data.propertyList[0].list[2].keyValue
					}
				};
				this.$reqFormPost(url, data, callBack);

			},
			getReCatDatil() {
				let self = this;
				let url = this.$baseUrl.bizUrl + "/goods/front/simpledetail";
				let data = {
					token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId,
					goodsId: this.goodsId //商品id
				};

				//发起网络请求
				let callBack = res => {
					if(res == null) {
						console.log("网络请求错误！");
						return;
					}

					if(res.status != 200) {
						console.log("请求数据错误");

						return;
					}
					if(res.status === 200) {
						if(res.data.status === 404) {
							MessageBox.alert(res.data.message);
							return;
						}
						this.num = 1;
						this.info = res.data.data;
						this.imgUrls = res.data.data.imageList.split(",");
						this.productTotle = res.data.data.memberPrice;
					}
				};
				this.$reqFormPost(url, data, callBack);
			},
			goSign() {
				this.$router.push({
					name: "sign"
				});
			},
			foBack() {
				this.$router.go(-1);
			}
		},
		mounted() {
			document.title = "商品详情";

			this.model = false;

			this.goodsId = this.$route.query.id;
			this.carId = this.$route.query.carId;
			
			this.moduleIcon = this.$route.query.icon
			this.themeColors = this.$store.getters.getMerchant.themeColors
			if(this.$store.getters.getMerchant.merchantId == 'Mer5ab5c8abdb573c06b88de8a9'){
				this.kdFlag = true
			}
			if(this.carId) {
				this.getDatil();
			} else {
				this.getReCatDatil();
			}
		},
		components: {
			Tabbar,
			TabItem,
			TabContainer,
			TabContainerItem,
			comhead,
			Swipe,
			SwipeItem
		}
	};
</script>
<style>
	.car-box {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		position: relative;
		border-bottom: solid 1px #e5e5e5;
	}
	
	.car-box-icon {
		width: 90px;
		height: 65px;
	}
	
	.icon-qiehuan {
		position: absolute;
		left: 6px;
		top: 1px;
	}
	
	.qieIocn {
		width: 50px;
		height: 22px;
		line-height: 22px;
		right: 5px;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		font-size: 14px;
		position: absolute;
		padding-left: 15px;
	}
	
	.car-box-icon>img {
		width: 100%;
		height: 100%;
	}
	
	.car-box-con {
		display: flex;
		flex: 1;
		flex-direction: column;
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 5px;
		padding-top: 5px;
	}
	
	.car-box-con>span {
		display: block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.num_box {
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		padding: 20px;
	}
	
	.num_small_box {
		border: solid 1px #ddd;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.num_box1 {
		background-color: #ebebe4;
		font-size: 14px;
		border-top: solid 1px #ddd;
		border-bottom: solid 1px #ddd;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.num_small_box_dis {
		background-color: #f8f8f8;
	}
	
	.modiaBoxDown2 {
		position: absolute;
		bottom: -100%;
		animation: myfirst0001 0.5s;
	}
	
	@keyframes myfirst0001 {
		from {
			bottom: 0;
		}
		to {
			bottom: -100%;
			display: none;
		}
	}
	
	.bg_shop_none1 {
		position: fixed;
		bottom: -100%;
		animation: myfirst0002 0.5s;
	}
	
	@keyframes myfirst0002 {
		from {
			display: flex;
		}
		to {
			display: none;
		}
	}
	
	.modiaBoxUp2 {
		position: absolute;
		bottom: 0;
		animation: myfirst000 0.5s;
		-moz-animation: myfimyfirst000rst 0.5s;
		/* Firefox */
		-webkit-animation: myfirst000 0.5s;
		/* Safari and Chrome */
		-o-animation: myfirst000 0.5s;
		/* Opera */
	}
	
	@keyframes myfirst000 {
		from {
			bottom: -100%;
		}
		to {
			bottom: 0;
		}
	}
	
	.basisInfo {
		margin: 20px 15px;
		border: 1px solid #e5e5e5;
	}
	
	.bg_shop1 {
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.498039);
		height: 100%;
		width: 100%;
	}
	
	.btm_box {
		font-size: 12px;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 50px;
		display: flex;
		background-color: #f8f8f8;
	}
	
	.leftbox {
		width: 7em;
		background-color: #f5f5f5;
		color: #999;
		border-right: solid 1px #e5e5e5;
		padding: 7px 5px 7px 7px;
	}
	
	.rightbox {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 2em;
		word-break: break-all;
	}
	
	.updateInfo1 {
		border-top: solid 1px #e5e5e5;
		border-bottom: solid 1px #e5e5e5;
		background-color: #f5f5f5;
		padding: 5px 10px;
		font-size: 14px;
		color: #fff;
	}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->